<template>
  <div class="app-container">
    <div class="todo-list-container">
<!--      <div class="git">-->
<!--        <a href="https://gitee.com/cpb2013/todo-list" target="_blank">https://gitee.com/cpb2013/todo-list</a>-->
<!--      </div>-->
      <TodoInput :newTodo="newTodo" @update:newTodo="updateNewTodo" @add="addTodo" />
      <TodoButtons @add="addTodo" @clear="clearTodos" />
      <TodoList :todos="todos" @remove="removeTodo" />
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import TodoInput from './TodoInput.vue';
import TodoButtons from './TodoButtons.vue';
import TodoList from './TodoList.vue';

export default {
  components: {
    TodoInput,
    TodoButtons,
    TodoList
  },
  setup() {
    const newTodo = ref('');
    const todos = ref<{ text: string, completed: boolean }[]>([]);

    function addTodo() {
      if (newTodo.value.trim() !== '') {
        todos.value.push({ text: newTodo.value.trim(), completed: false });
        newTodo.value = '';
      }
    }

    function removeTodo(index: number) {
      todos.value.splice(index, 1);
    }

    function clearTodos() {
      todos.value = [];
    }

    function updateNewTodo(value: string) {
      newTodo.value = value;
    }

    return {
      newTodo,
      todos,
      addTodo,
      removeTodo,
      clearTodos,
      updateNewTodo
    };
  }
};
</script>
<style>
@import url('../assets/main.css');
</style>